<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>RaspCTL-BaiduVideo</title>
    <script src="/static/js/jquery-1.8.3.js"></script>
    <script src="/static/js/jquery.json-2.4.js"></script>
    <style>
        body {
            font: 12px arial;
        }
        span {
            font-size: 24px;
            font-family: "Microsoft YaHei","SimHei";
        }
        div {
            word-wrap: break-word;
            word-break: break-all;
            clear: left;
        }
        li {
            float: left;
            list-style-type: none; 
            padding: 0 8px;
        }
        li.last {
            float: none;
        }
        li.res {
            display: block;
            border: 1px solid;
            width: 50px;
            height: 20px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        li.current {
            border: 1px solid grey;
        }
        a {
            text-decoration: none;
        }
        #videolist img {
            width:  16px;
            height: 16px;
        }
    </style>
</head>
<body>

<div id="searcharea">
<ul><li>
<input id="kw" value="敢死队" size="50"/>
<button id="search">搜索</button>
</li></ul>
</div>

<div id="videolist">
</div>

<div id="videotmpl" style="display:none">
<div>
    <div name="info">
        <ul>
            <li class="last"><span></span></li>
            <li class="last"></li>
        </ul>
    </div>

    <div name="sites">
        <ul></ul>
    </div>
     
    <div name="res">
        <ul></ul>
    </div>
</div>
</div>

<script type="text/javascript">
$.ajaxSetup({async:false});

$("#search").click(function(e) {
    kw = $("#kw").val();
    if(kw == "") {
        alert("请输入关键字.");
        return;
    }
    $("#videolist").empty();
    qp = {name:"plugins.baidu.Index.search", args:[kw]};
    $.get('/api', {data:$.toJSON(qp)}, function(data) {
        if(data && data.status == "Success") {
            show_video(data.result.sResult.aldjson); 
        } else {
            alert("ERROR.");
        }
    });
});

function show_video(list) {
    $("#videolist").empty();
    for (i in list) {
        v = list[i];
        $("#videolist").append($("#videotmpl").html());
        $("#videolist>div:last").attr("id", "video" + i);
        tdiv = $("#video" + i);

        tinfo = $("#videolist div[name=info]:last");
        tinfo.find("ul li:first span").html(v.title);
        tinfo.find("ul li:last").html(v.brief_short);

        for (i in v.sites) {
            site = v.sites[i];
            if (is_filter(site)) {
                continue;
            }
            tsites = tdiv.find("div[name=sites]");
            tsites.find("ul").append("<li></li>");
            tsites.find("ul li:last").append("<img></img>" + site.site_name);
            tsites.find("ul li:last img").attr("src", site.site_logo);
            tsites.find("ul li:last").attr("name", v.id);
            tsites.find("ul li:last").attr("type", v.ty);
            tsites.find("ul li:last").attr("site", site.site_url);
            tsites.find("ul li:last").attr("title", v.title);

            tsites.find("ul li:last").click(function(e) {
                var type = $(this).attr("type");
                if (type == 21) {
                    show_movie($(this));
                } else if(type == 22) {
                    show_tv($(this));
                }
            } ); 
        }                
        tsites.find("ul li:last").attr("class", "last");
        tdiv.find("div[name=sites] li:first").click();
    }
}

function play_video(name, url) {
    qp = {name:"plugins.baidu.Index.play", args:[name, url]};
    $.get('/api', {data:$.toJSON(qp)}, function(data) {
        if(data && data.status == "Success") {
            if(data.result) {
                location.href = '/player';
            } else {
                alert("暂不支持该视频！");
            }
        } else {
            alert("ERROR.");
        }
    });
}

function show_tv(li) {
    id = li.attr("name");
    site = li.attr("site");
    div = li.parent().parent().parent();

    qp = {name:"plugins.baidu.Index.res", args:[id, site]};
    $.get('/api', {data:$.toJSON(qp)}, function(data) {
        if(data && data.status == "Success") {
            videos = data.result.videos;            
            tres = div.find("div[name=res]") 
            tres.find("ul").empty();
            for (i in videos) {
                episode = (parseInt(i) + 1).toString();
                v = videos[i];    
                tres.find("ul").append("<li></li>");
                tres.find("ul li:last").append("<img></img> " + episode);
                tres.find("ul li:last img").attr("src", li.find("img").attr("src"));
                tres.find("ul li:last").attr("name", v.title + episode); 
                tres.find("ul li:last").attr("url", v.url);
                tres.find("ul li:last").attr("class", "res");

                tres.find("ul li:last").click(function(e) {
                    play_video($(this).attr("name"), $(this).attr("url")); 
                });
            }
        } else {
            alert("ERROR.");
        }
    });
}

function show_movie(li) {
    tdiv = li.parent().parent().parent();
    tres = tdiv.find("div[name=res]");
    tres.find("ul").empty();
    tres.find("ul").append("<li></li>");
    tres.find("ul li").append("<img></img> 播放");
    tres.find("ul li img").attr("src", li.find("img").attr("src"));
    tres.find("ul li").attr("name", li.attr("title")); 
    tres.find("ul li").attr("url", li.attr("site"));
    tres.find("ul li").attr("class", "res");

    tres.find("ul li").click(function(e) {
        play_video($(this).attr("name"), $(this).attr("url"));
    } );
}

function is_filter(site) {
    sites = ["CNTV", "PPS", "乐视", "优酷", "电影网", "风行网", "迅雷看看"];
    for (i in sites) {
        if(sites[i] == site.site_name) {
            return false;
        }
    }
    return true;
}

</script>
    
</body>
</html>
